@use './variables' as *;

// 重置样式
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body, #app {
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  min-width: 100vw;
  background: var(--el-bg-color-page, #f5f7fa);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.el-main {
  background: none;
  padding: 40px !important;
  margin: 0 !important;
  min-height: 0;
}

@media (max-width: 768px) {
  .el-main {
    padding: 16px !important;
  }
}

.tool-container,
.format-container {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: 100% !important;
  background: none !important;
}

html {
  font-family: $font-family;
  font-size: $font-size-base;
  line-height: $line-height-base;
  color: var(--el-text-color-primary);
  background-color: var(--el-bg-color);
  transition: background-color 0.3s, color 0.3s;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
}

// 滚动条样式
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--el-fill-color-blank);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: var(--el-border-color-darker);
  border-radius: 3px;
  
  &:hover {
    background: var(--el-border-color-dark);
  }
}

// 深色模式样式
html.dark {
  --el-bg-color: #{$dark-bg-color};
  --el-bg-color-page: #{$dark-bg-color};
  --el-bg-color-overlay: #{$dark-bg-color-overlay};
  --el-text-color-primary: #{$dark-text-color-primary};
  --el-text-color-regular: #{$dark-text-color-regular};
  --el-text-color-secondary: #{$dark-text-color-secondary};
  --el-border-color: #{$dark-border-color};
  --el-border-color-light: #{$dark-border-color-light};
  --el-border-color-lighter: #{$dark-border-color-lighter};
  --el-border-color-extra-light: #{$dark-border-color-extra-light};
  --el-fill-color-blank: #{$dark-fill-color-blank};
  --el-fill-color-light: #{$dark-fill-color-light};
  --el-fill-color-lighter: #{$dark-fill-color-lighter};
  --el-fill-color-extra-light: #{$dark-fill-color-extra-light};
  --el-fill-color-dark: #{$dark-fill-color-dark};
  --el-fill-color-darker: #{$dark-fill-color-darker};
  --el-mask-color: #{$dark-mask-color};
  --el-mask-color-extra-light: #{$dark-mask-color-extra-light};

  // 深色模式下的特殊样式
  .el-main {
    background-color: var(--el-bg-color-page) !important;
  }

  .el-card {
    background-color: var(--el-bg-color-overlay);
    border-color: var(--el-border-color);
  }

  .el-tabs__header {
    background-color: transparent;
  }

  .el-input__wrapper {
    background-color: var(--el-fill-color-light);
  }

  .el-textarea__inner {
    background-color: var(--el-fill-color-light);
    color: var(--el-text-color-primary);
  }

  .el-button.is-plain {
    background-color: var(--el-fill-color-light);
    border-color: var(--el-border-color);
    color: var(--el-text-color-primary);
  }

  .action-button {
    background: var(--el-color-primary) !important;
    color: #fff !important;
  }

  .markdown-preview {
    background-color: var(--el-bg-color-overlay) !important;
    border-color: var(--el-border-color) !important;
    color: var(--el-text-color-primary) !important;
  }

  .video-info {
    background-color: var(--el-fill-color-light) !important;
    color: var(--el-text-color-primary) !important;
  }

  .video-info p {
    background-color: var(--el-bg-color-overlay) !important;
    color: var(--el-text-color-primary) !important;
  }

  .progress-section {
    background-color: var(--el-fill-color-light) !important;
  }
}

// 通用样式类
.flex-center {
  @include flex-center;
}

.flex-between {
  @include flex-between;
}

.text-ellipsis {
  @include text-ellipsis;
}

// 响应式工具类
.hidden-xs {
  @include responsive(xs) {
    display: none !important;
  }
}

.hidden-sm {
  @include responsive(sm) {
    display: none !important;
  }
}

.hidden-md {
  @include responsive(md) {
    display: none !important;
  }
}

.hidden-lg {
  @include responsive(lg) {
    display: none !important;
  }
}

.hidden-xl {
  @include responsive(xl) {
    display: none !important;
  }
}

// 间距工具类
.m-0 { margin: 0 !important; }
.m-1 { margin: $spacing-1 !important; }
.m-2 { margin: $spacing-2 !important; }
.m-3 { margin: $spacing-3 !important; }
.m-4 { margin: $spacing-4 !important; }

.p-0 { padding: 0 !important; }
.p-1 { padding: $spacing-1 !important; }
.p-2 { padding: $spacing-2 !important; }
.p-3 { padding: $spacing-3 !important; }
.p-4 { padding: $spacing-4 !important; }

// 文本工具类
.text-primary { color: $primary-color !important; }
.text-success { color: $success-color !important; }
.text-warning { color: $warning-color !important; }
.text-danger { color: $danger-color !important; }
.text-info { color: $info-color !important; }

.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }

// 边框工具类
.border {
  border: 1px solid var(--el-border-color);
}

.border-top {
  border-top: 1px solid var(--el-border-color);
}

.border-bottom {
  border-bottom: 1px solid var(--el-border-color);
}

.border-left {
  border-left: 1px solid var(--el-border-color);
}

.border-right {
  border-right: 1px solid var(--el-border-color);
}

// 阴影工具类
.shadow {
  box-shadow: $box-shadow-base;
}

.shadow-light {
  box-shadow: $box-shadow-light;
}

.shadow-dark {
  box-shadow: $box-shadow-dark;
}

// 主题切换动画
* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}

// 特殊组件的深色模式优化
html.dark {
  .el-breadcrumb__inner a,
  .el-breadcrumb__inner.is-link {
    color: var(--el-color-primary);
  }

  .el-upload-dragger {
    background-color: var(--el-fill-color-light);
    border-color: var(--el-border-color);
  }

  .el-upload-dragger:hover {
    border-color: var(--el-color-primary);
  }

  .el-progress-bar__outer {
    background-color: var(--el-fill-color-dark);
  }

  .el-slider__runway {
    background-color: var(--el-fill-color-dark);
  }
}

// 响应式工具类
@media (max-width: $breakpoint-xs) {
  .hidden-xs {
    display: none !important;
  }
}

@media (max-width: $breakpoint-sm) {
  .hidden-sm {
    display: none !important;
  }
}

@media (max-width: $breakpoint-md) {
  .hidden-md {
    display: none !important;
  }
}

@media (max-width: $breakpoint-lg) {
  .hidden-lg {
    display: none !important;
  }
}

@media (max-width: $breakpoint-xl) {
  .hidden-xl {
    display: none !important;
  }
}

// 工具类
.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.flex-1 {
  flex: 1;
}

.flex-wrap {
  flex-wrap: wrap;
}

.gap-1 {
  gap: $spacing-1;
}

.gap-2 {
  gap: $spacing-2;
}

.gap-3 {
  gap: $spacing-3;
}

.gap-4 {
  gap: $spacing-4;
}

.m-1 {
  margin: $spacing-1;
}

.m-2 {
  margin: $spacing-2;
}

.m-3 {
  margin: $spacing-3;
}

.m-4 {
  margin: $spacing-4;
}

.p-1 {
  padding: $spacing-1;
}

.p-2 {
  padding: $spacing-2;
}

.p-3 {
  padding: $spacing-3;
}

.p-4 {
  padding: $spacing-4;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.border {
  border: 1px solid var(--el-border-color);
}

.border-t {
  border-top: 1px solid var(--el-border-color);
}

.border-b {
  border-bottom: 1px solid var(--el-border-color);
}

.border-l {
  border-left: 1px solid var(--el-border-color);
}

.border-r {
  border-right: 1px solid var(--el-border-color);
}

.rounded {
  border-radius: $border-radius-base;
}

.rounded-lg {
  border-radius: $border-radius-large;
}

.shadow {
  box-shadow: $box-shadow-base;
}

.shadow-lg {
  box-shadow: $box-shadow-light;
}

.transition {
  transition: all 0.3s ease;
} 